<!-- subpkg_medicine/payment/index.vue -->
<script lang="ts" setup>
  import { payAPI } from '@/api'
  import { getAddressListAPI } from '@/api/address'
  import { getPrescriptionOrderAPI, preOrderAPI } from '@/api/order'
  import { GlobalVariable, PAGE_PATH } from '@/constants'
  import type { Address } from '@/types/adress'
  import type { OrderPre } from '@/types/order'
  import { onMounted, ref } from 'vue'

  const orderDetail = ref<OrderPre>({} as OrderPre) // 订单详情数据
  const addressDetail = ref<Address>({} as Address)
  // 接收处方id的参数
  const props = defineProps<{
    id: string
  }>()

  onMounted(() => {
    getAddressList()
    getOrderDetail()
  })
  // 获取订单详情的方法
  const getOrderDetail = async () => {
    orderDetail.value = await getPrescriptionOrderAPI({
      prescriptionId: props.id,
    })
  }

  const getAddressList = async () => {
    const list = await getAddressListAPI()
    // 获取里面isDefault为1的地址
    const defaultAddress = list.find((item) => item.isDefault === 1)
    if (defaultAddress) {
      addressDetail.value = defaultAddress
    }
  }
  const orderId = ref('')
  // 支付
  const paymentRef = ref()
  // 立即支付
  const handlePay = async () => {
    if (orderId.value) {
      return uni.showToast({
        title: '订单不能重复创建',
        icon: 'none',
      })
    }
    const res = await preOrderAPI({
      addressId: addressDetail.value.id,
      id: props.id,
    })
    orderId.value = res.id // 赋值订单id
    paymentRef.value.open() // 显示支付组件
  }
  // 关闭支付
  const handleClose = () => {
    uni.showModal({
      title: '关闭支付',
      content: '取消支付将无法获得医生回复，医生接诊名额有限，是否确认关闭？',
      cancelText: '仍要关闭',
      cancelColor: '#848484',
      confirmText: '继续支付',
      confirmColor: '#16C2A3',
      success: (res) => {
        if (!res.confirm) {
          uni.reLaunch({
            url: PAGE_PATH.HOME_PAGE,
          })
        }
      },
    })
  }
  // 确认支付
  const handleConfirm = async (index: number) => {
    if (index === 0) {
      return uni.showToast({
        title: '当前不支持微信支付',
        icon: 'none',
      })
    }
    // 支付宝支付
    // 订单id
    const res = await payAPI({
      orderId: orderId.value,
      paymentMethod: '1', // 0微信支付，1支付宝 2云闪付
      payCallback: GlobalVariable.HOST_URL + PAGE_PATH.PAY_RESULT_PAGE,
    })
    window.location.href = res.payUrl // 支付宝的地址 不是我们项目的地址
  }
</script>

<template>
  <scroll-view background-color="#f6f6f6">
    <view class="medicine-page">
      <view class="page-header">
        <view class="order-shippment">
          <view class="region">
            <uni-icons size="16" color="#FF7702" type="location-filled" />
            {{ addressDetail.province }}
          </view>
          <view class="detail">{{ addressDetail.addressDetail }}</view>
          <view class="receiver">{{ addressDetail.receiver }} {{ addressDetail.mobile }}</view>
        </view>
      </view>

      <view class="order-shop">
        优医药房
        <text class="alt">优医质保 假一赔十</text>
      </view>
      <!-- 药品列表 -->
      <view class="medicine-list">
        <view class="medicine-list-item" v-for="item in orderDetail.medicines" :key="item.id">
          <image class="medicine-cover" :src="item.avatar" mode="aspectFill" />
          <view class="medicine-info">
            <text class="name">{{ item.name }}</text>
            <text class="unit symbol">{{ item.specs }}</text>
            <text class="price">¥{{ item.amount }}</text>
          </view>
          <view class="quantity">x{{ item.quantity }}</view>
          <view class="guide">用法用量：{{ item.usageDosag }}</view>
        </view>
        <!-- <view class="medicine-list-item">
          <image class="medicine-cover" src="/static/uploads/medicine-2.jpg" mode="aspectFill" />
          <view class="medicine-info">
            <text class="name">瑞巴派特片</text>
            <text class="unit symbol">24片</text>
            <text class="price">¥25.00</text>
          </view>
          <view class="quantity">x1</view>
          <view class="guide">用法用量：口服，每次1袋，每天3次，用药3天</view>
        </view> -->
      </view>

      <!-- 订单信息 -->
      <view class="order-info">
        <uni-list :border="false">
          <uni-list-item title="药品金额" :right-text="`¥${orderDetail.payment}`" />
          <uni-list-item title="运费" :right-text="`¥${orderDetail.expressFee}`" />
          <uni-list-item
            title="优惠券"
            show-arrow
            :right-text="`-¥${orderDetail.couponDeduction}`"
          />
          <uni-list-item title="实付款" :right-text="`¥${orderDetail.actualPayment}`" />
        </uni-list>
      </view>

      <!-- 底部 -->
      <view class="toolbar">
        <view class="total-amount">
          需付款: <text class="number">¥{{ orderDetail.actualPayment }}</text>
        </view>
        <view class="buttons">
          <button class="uni-button" @click="handlePay">立即支付</button>
        </view>
      </view>
    </view>
    <custom-payment
      ref="paymentRef"
      :amount="orderDetail.actualPayment"
      :order-id="orderDetail.id"
      @close="handleClose"
      @confirm="handleConfirm"
    />
  </scroll-view>
</template>

<style lang="scss">
  @import './index.scss';
</style>
